<template>
  <div class="cate">
    <div class="search">
      <van-icon name="location-o" size="0.6rem" color="#fff" />
      <i class="i">小u商城</i>
      <to-search width="50%"></to-search>
    </div>
    <div class="con">
      <div class="left">
        <div
          v-for="(item, index) in arr"
          :key="item.id"
          :class="index == n ? 'active' : ''"
          @click="changeN(index)"
        >
          {{ item.catename }}
        </div>
      </div>
      <div class="right">
        <div class="item" v-for="item in arr" :key="item.id" ref="item">
          <h3>{{ item.catename }}</h3>
          <div class="item-con" v-if="item.children">
            <div class="item-every" v-for="i in item.children" :key="i.id"
            @click="$router.push({name:'列表',query:{id:item.id,type:2}})"
            >
              <img :src="$pre + i.img" alt="" />
              <div>{{ i.catename }}</div>
            </div>
          </div>
          <div class="item-con" v-else>
            <van-empty description="该分类没有二级分类" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqCates } from "../../http/api";
export default {
  data() {
    return {
      arr: [],
      n: 0,
    };
  },
  mounted() {
    reqCates().then((res) => {
      this.arr = res.data.list;
    });
  },
  methods: {
    changeN(index) {
      this.n = index;
      this.$refs.item[this.n].scrollIntoView({ behavior: "smooth" });
    },
  },
};
</script>

<style scoped lang="less">
@import "../../less/index.less";
.cate {
  .con {
    height: calc(
      100vh - @headerHeight - @footerHeight - @searchHeight - @margin20 -
        @margin20
    );
    display: flex;
    .left {
      width: 2rem;
      overflow-y: auto;
      border-right: 0.01rem solid @border-color;
      div {
        text-align: center;
        font-size: 0.26rem;
        line-height: 0.5rem;
        color: @font-color3;
        transition: all 0.3s;
      }
      .active {
        background: @primary;
        color: @white;
      }
    }
    .right {
      flex: 1;
      overflow-y: auto;
      background: @border-color;
      .item {
        margin: @margin20;
        background: @white;
        h3 {
          font-size: @h3;
          color: @font-color3;
          margin: @margin20;
        }
        .item-con {
          overflow: hidden;
          .item-every {
            width: 50%;
            float: left;

            text-align: center;
            img {
              width: 1rem;
              height: 1rem;
              border-radius: 50%;
            }
            div {
              line-height: 0.6rem;
              font-size: @p;
              color: @font-color6;
            }
          }
        }
      }
    }
  }
}
a {
  display: inline-block;
  margin: @margin20;
}
.search{
  background: @deep;
}
.i{
  font-size: 0.3rem;
  line-height: 0.6rem;
  color: #fff;
  margin-right: 1rem;
}
</style>